<html>
<head>
    <title>进度条</title>
</head>
<body>
    <h1>JavaScript 进度条</h1>

    <div id="myProgress">
        <div id="myBar" style="width: 100%;"></div>
    </div>

    <br>
    <button onclick="move()">点我</button>
    <style>
        #myProgress {
            width: 100%;
            background-color: #ddd;
        }

        #myBar {
            width: 1%;
            height: 30px;
            background-color: #4CAF50;
        }
    </style>

    <script>
        function move() {
            var elem = document.getElementById("myBar");
            var width = 1;
            var id = setInterval(frame, 10);
            function frame() {
                if (width >= 100) {
                    clearInterval(id);
                } else {
                    width++;
                    elem.style.width = width + '%';
                }
            }
        }
    </script>
</body>
</html>